<template>
  <div class="content">
    <!-- 顶部导航 -->
    <van-nav-bar title="家政服务标准" left-arrow @click-left="$router.back()" />
    <!-- 中间部分 -->
    <div class="fromCard">
      <van-cell class="cell">
        <span slot="title" class="cell-text">服务标准</span>
        <i slot="icon" class="cell-icon"></i>
      </van-cell>
      <div class="van-hairline--bottom"></div>

      <van-form v-model="formData" @submit="onSubmit">
        <!-- 服务区域 -->
        <van-field
          readonly
          clickable
          name="picker"
          :value="formData.region"
          label="服务区域："
          placeholder="请选择"
          input-align="right"
          @click="regionShow = true"
        />
        <van-popup v-model="regionShow" position="bottom">
          <van-picker
            show-toolbar
            :columns="regionColumns"
            @confirm="regionBtnOk"
            @cancel="regionShow = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 服务类型 -->
        <van-field name="serviceType" label="服务类型">
          <template #input>
            <van-row type="flex" justify="end" gutter="5" style="width: 100%">
              <div v-for="(obj, index) in formData.islabelList" :key="index">
                <van-col v-if="obj.islabel" class="label-item">
                  <van-tag
                    plain
                    round
                    size="medium"
                    type="primary"
                    class="label"
                    @click="isSelectLabel(index)"
                    >{{ obj.val }}</van-tag
                  >
                </van-col>
              </div>
            </van-row>
          </template>
        </van-field>
        <van-row gutter="20" class="label-box">
          <van-col
            v-for="(obj, index) in labelList"
            :key="index"
            class="label-item"
          >
            <van-tag
              plain
              round
              size="medium"
              :color="obj.islabel ? '#979191' : ''"
              type="primary"
              class="label"
              @click="obj.islabel ? $toast('不能重复添加') : isLabel(index)"
              >{{ obj.val }}</van-tag
            >
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>
        <!-- 星级标准 -->
        <van-field name="checkboxGroup" label="星级标准">
          <template #input>
            <van-row type="flex" justify="end" gutter="5" style="width: 100%">
              <div v-for="(obj, index) in formData.isStarsList" :key="index">
                <van-col v-if="obj.islabel" class="label-item">
                  <van-tag
                    plain
                    round
                    size="medium"
                    type="primary"
                    class="label"
                    @click="isSelectStars(index)"
                    >{{ obj.val }}</van-tag
                  >
                </van-col>
              </div>
            </van-row>
          </template>
        </van-field>
        <van-row gutter="20" class="label-box">
          <van-col
            v-for="(obj, index) in starsList"
            :key="index"
            class="label-item"
          >
            <van-tag
              plain
              round
              size="medium"
              :color="obj.islabel ? '#979191' : ''"
              type="primary"
              class="label"
              @click="obj.islabel ? $toast('不能重复添加') : isStars(index)"
              >{{ obj.val }}</van-tag
            >
          </van-col>
        </van-row>
        <!-- 底部按钮 -->
        <van-button type="primary" block color="#3F51B5" class="button"
          >家政服务标准查询</van-button
        >
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        region: "", // 服务区域
        islabelList: [], // 已选服务类型数组
        isStarsList: [], // 已选星级
      },
      // 服务区域选择框
      regionShow: false,
      // 服务区域数组
      regionColumns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      // 服务类型数组
      labelList: [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ],
      // 星级数组
      starsList: [
        { val: "一星", islabel: false },
        { val: "二星", islabel: false },
        { val: "三星", islabel: false },
        { val: "四星", islabel: false },
        { val: "五星", islabel: false },
      ],
    };
  },
  methods: {
    // 服务区域选择框确认按钮
    regionBtnOk(value) {
      this.formData.region = value;
      this.regionShow = false;
    },
    // 服务类型标签点击事件
    isLabel(index) {
      if (this.formData.islabelList.length >= 5) {
        return this.$toast("最多只能添加5个");
      }
      this.labelList[index].islabel = true;
      this.formData.islabelList.push(this.labelList[index]);
    },
    // 已选择的服务类型标签
    isSelectLabel(index) {
      this.formData.islabelList[index].islabel = false;
      this.formData.islabelList.splice(index, 1);
    },
    // 星级选择
    isStars(index) {
      if (this.formData.isStarsList.length >= 3) {
        return this.$toast("最多只能添加3个");
      }
      this.starsList[index].islabel = true;
      this.formData.isStarsList.push(this.starsList[index]);
    },
    // 已选择的服务类型标签
    isSelectStars(index) {
      this.formData.isStarsList[index].islabel = false;
      this.formData.isStarsList.splice(index, 1);
    },
    // 提交表单
    onSubmit() {
      this.$toast.success("提交表单成功");
      // 重置表单
      this.formData = {
        region: "", // 服务区域
        islabelList: [], // 已选服务类型数组
        isStarsList: [], // 已选星级
      };
      // 重写数据
      this.labelList = [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ];
      // 星级数组
      this.starsList = [
        { val: "一星", islabel: false },
        { val: "二星", islabel: false },
        { val: "三星", islabel: false },
        { val: "四星", islabel: false },
        { val: "五星", islabel: false },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  background-color: #f8f8f8;
  /deep/.van-nav-bar__content {
    height: 150px;
    width: 100%;
    background-color: #3f51b5;
    padding-bottom: 54px;
    .van-nav-bar__left {
      height: 126px;
      margin-top: 10px;
      font-size: 32px;
      .van-nav-bar__arrow {
        color: #fff;
      }
    }
    .van-nav-bar__title {
      margin-left: 80px;
      margin-bottom: 8px;
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }
  }
  /deep/.fromCard {
    position: absolute;
    left: 24px;
    top: 126px;
    z-index: 1;
    width: 704px;
    border-radius: 10px;
    background-color: #fff;
    .cell {
      border-bottom: 2px solid #f0eeee;
      .cell-text {
        font-size: 28px;
        margin-left: 20px;
        color: #101010;
        font-weight: 700;
      }
      .cell-icon {
        width: 8px;
        height: 28px;
        background-color: #3f51b5;
        margin-top: 8px;
      }
    }
    .van-hairline--bottom {
      border-bottom: 1px solid #f0eeee;
    }
    .label-box {
      margin: 0 36px 30px;
      .label {
        margin-bottom: 8px;
        // padding: 5px 20px;
      }
    }
  }

  .button {
    position: fixed;
    bottom: 0;
    z-index: 1;
  }
}
</style>

